<template>
<div class="content">
    <compExtend 
        :propsList="propsList"
        :tpl="tpl" :bindConfig="bindConfig"
    >
        <h2 class="subTitle">代码示例</h2>
        <Card dis-hover>
            <cfgEditTable v-bind="bindConfig" @change="editTableChane"/>
        </Card>
    </compExtend>
</div>
</template>

<script>
import compExtend from '../parts/compExtend'

export default {
    components: { compExtend },
    data() {
        let bindConfig = {
            value: [{name: 'demo1', link: {}}],
            showNum: true,
                // iview的table组件相关的props
            tableConfig: {
            },
            maxLength: 3,
            // readOnly: true,
            addTpl: {
                link: {}
            },
            columns: [
                {
                    key: 'name',
                    title: 'name',
                    maxWidth: 120,
                    elementName: 'fieldCell',
                    props: { config: { type: 'text', clearable: true } },
                },
                {
                    key: 'value',
                    title: 'value',
                    maxWidth: 120,
                    elementName: 'fieldCell',
                    props: { config: { type: 'text', clearable: true } },
                },
                {
                    key: 'pointer',
                    title: '关联模型-级联方式',
                    maxWidth: 300,
                    elementName: 'cfgCascaderModel',
                    props: {  },
                },
                {
                    key: 'link',
                    title: '关联模型-pointer方式',
                    maxWidth: 300,
                    elementName: 'cfgConsumePointer',
                    props: {  },
                },
                {
                    key: 'pointer.condition', // 支持级联
                    title: 'condition',
                    elementName: 'fieldCell',
                    props: { config: { type: 'text', clearable: true } },
                },
                { slot: 'operation' },
            ],
        };
        let propsList = [
            {
                title: 'cfgEditTable',
                data: [
                    { name: 'value', type: 'array', default: " [] ", desc: '数据列表' },
                    { name: 'columns', type: 'array', default: " [] ", desc: '列设置，详细内容参照下面的columns props' },
                    { name: 'addTpl', type: 'object', default: " {} ", desc: "新增一行时，默认的formData数据，如：<code>{ name: 'xx', refModel: {} }</code>" },
                    { name: 'tableConfig', type: 'object', default: " {} ", desc: 'iview的table组件相关的props' },
                    { name: 'showNum', type: 'boolean', default: " false ", desc: '是否在第一列显示序号' },
                    { name: 'maxLength', type: 'number', default: " - ", desc: '记录的最大条数' },
                    { name: 'readOnly', type: 'boolean', default: " false ", desc: '是否只读；设置为true时：输入框不可编辑，不可增行、删行' },
                ]
            },
            {
                title: 'columns',
                data: [
                    { name: 'elementName', type: 'string', default: " - ", desc: '可编辑的动态组件，组件需要注册，并且组件需要支持：value属性，并且数据变化时触发change事件' },
                    { name: 'props', type: 'object', default: " {} ", desc: "动态组件的属性，通过v-bind传递给动态组件, 如elementName='fieldCell'时属性可配置为：</br><code>config: { type: 'select', options: []}</code>" },
                    { name: '其它属性', type: '', default: " ", desc: '支持iview table组件的<a href="http://v4.iviewui.com/components/table#column">columns props</a> ，如果 <code> type、key、title、width</code>等' },
                ]
            },
        ]
        let tpl = `<cfgEditTable v-bind="bindConfig" @change="val => editTableChane(val)"/>`;

        return {
            tpl,
            bindConfig,
            propsList,
        }
    },
    methods: {
        editTableChane(val) {
            console.log("file: index.vue:117  editTableChane  val:", val)
        },
    },
    props: {
    }
}
</script>

<style scoped lang="less">
// .content {
//     /deep/ textarea.jsoneditor-text, /deep/ .ace-jsoneditor {
//         min-height: 600px;
//     }
// }
</style>